<script setup lang="ts"></script>

<template>
  <div class="swiper-pages">
    <div class="content">
      <div class="title">提供可接入的产品与能力</div>
      <div class="desc">
        面向商户提供全方位的聚付服务，支持刷卡、扫码、刷脸及互联网等支付方式，
        满足商户线上线下一体化的支付需求
      </div>
      <div class="ability">
        <div class="ability-item">
          <div class="item-content">
            <div class="a-title">开户便捷</div>
            <div class="a-desc">
              通过实名认证即可成为商家中心用户，选择产品并提交相关材料，即可通过审核
            </div>
          </div>
        </div>
        <div class="ability-item">
          <div class="item-content">
            <div class="a-title">开户便捷</div>
            <div class="a-desc">
              通过实名认证即可成为商家中心用户，选择产品并提交相关材料，即可通过审核
            </div>
          </div>
        </div>
        <div class="ability-item">
          <div class="item-content">
            <div class="a-title">开户便捷</div>
            <div class="a-desc">
              通过实名认证即可成为商家中心用户，选择产品并提交相关材料，即可通过审核
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss/mixins.scss";

.swiper-pages {
  height: 100%;
  width: 100%;
  box-sizing: border-box;

  .title {
    font-weight: 700;
    font-size: 64px;
    color: #070a14;
    margin-top: 82px;
    text-align: center;
  }

  .content {
    // border: 1px solid #000;
  }

  .desc {
    width: 858px;
    margin: 42px auto 0 auto;
    font-weight: 400;
    font-size: 18px;
    color: #8b8b8b;
    line-height: 34px;
    text-align: center;
  }

  .ability {
    margin-top: 47px;
    position: relative;
    width: 100%;
    height: 468px;
    overflow: hidden;

    .ability-item {
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      .item-content {
          padding-left: 45px;
          padding-top: 31px;
          width: 496px;
          height: 187px;
          background: linear-gradient(
            92deg,
            #a70d00 0%,
            rgba(167, 13, 0, 0) 100%
          );
          margin-top: 68px;
          .a-title {
            font-weight: 500;
            font-size: 31px;
            color: #ffffff;
          }
          .a-desc {
            margin-top: 20px;
            width: 395px;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 24px;
          }
        }
      &:nth-child(1) {
        background-image: url("/images/index/ability1.png");
        width: 680px;
        height: 468px;
        z-index: 3;
        left: 0;
        
      }
      &:nth-child(2) {
        background-image: url("/images/index/ability2.png");
        width: 601px;
        height: 414px;
        z-index: 2;
        left: 350px;
      }
      &:nth-child(3) {
        background-image: url("/images/index/ability3.png");
        width: 541px;
        height: 373px;
        z-index: 1;
        left: 690px;
      }
    }
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }
}
</style>
